<template>
    <!-- 新增巡查反馈 -->
    <el-drawer
    v-model="isShow"
    size="50%"
    :destroy-on-close="true"
    @close="closeHandle"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    :show-close="false"
    >
   
    <template #header="{ close, titleId, titleClass }">
        <h4 :id="titleId" :class="titleClass">{{ tittle }}</h4>
    </template>
    <el-image
        class="mb-3"
        v-if="imgurl != ''"
        style="width: 100px; height: 100px;border:1px solid #dcdfe6"
        :src="imgurl"
        :previewSrcList="srcList" />
    <el-form :model="form"  ref="formRef" :rules="rules" v-loading="loading">
        <el-row class="mb-3">
            <el-col :span="24" class="tittle">
                <div class="tittle_dian"></div><span >基本信息</span> 
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="巡查单位" label-width="100px">
                  <el-input v-model="form.xcUnitName" :readonly="isreadonly" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="被巡查单位" label-width="100px">
                  <el-input v-model="form.bxcUnitName" :readonly="isreadonly" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="巡查人" label-width="100px">
                  <el-input v-model="form.xcUserName" :readonly="isreadonly" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="巡查时间" label-width="100px">
                  <el-input v-model="form.xcdatetime" :readonly="isreadonly" />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="巡查信息" label-width="100px" label-position="top">
                    <el-checkbox-group v-model="form.xcDetailList" :disabled="isreadonly" style="width:100%">
                        <el-row :gutter="20">
                            <el-col :span="8" v-for="(item, index) in checkboxOptions" :key="item.xcContentId">
                                <el-checkbox :label="item.xcContentName" :value="item.xcContentId" />
                            </el-col>
                        </el-row>
                    </el-checkbox-group>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="其他选项描述" label-width="100px">
                    <el-input v-model="other" type="textarea" resize="none" :rows="3" :readonly="isreadonly" />
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="具体描述" label-width="100px">
                    <el-input v-model="info" type="textarea" resize="none" :rows="3" :readonly="isreadonly" />
                </el-form-item>
            </el-col>
        </el-row>
        <!-- <el-row class="">
            <el-col :span="24" class="tittle">
                <div class="tittle_dian"></div><span >巡查信息</span> 
            </el-col>
        </el-row> -->
        <!-- <el-row >
            <el-col :span="24">
                <el-button type="primary" 
                @click="addRow()"
                class='mb-3 mt-3'
                v-if="isShowAuto">
                    <el-icon class="me-2">
                        <Plus/>
                    </el-icon>
                    添加巡查信息
                </el-button>
                <el-table :data="TableData" show-overflow-tooltip  >
                    <el-table-column label="巡查问题">
                        <template #default="scope">
                        <el-input v-if="scope.row.isEditing" v-model="scope.row.areaname" placeholder="请输入巡查问题" />
                        <span v-else>{{ scope.row.areaname }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="被巡查单位">
                        <template #default="scope">
                        <el-input v-if="scope.row.isEditing" v-model="scope.row.getuserId" placeholder="请输入被巡查单位" />
                        <span v-else>{{ scope.row.getuserId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="巡查场所">
                        <template #default="scope">
                        <el-input v-if="scope.row.isEditing" v-model="scope.row.getdate" placeholder="请输入巡查场所" />
                        <span v-else>{{ scope.row.getdate }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="140px" align="center">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="editRow(scope.row)" v-if="!scope.row.isEditing">
                        <el-icon class="me-1">
                            <Edit/>
                        </el-icon>
                        编辑
                        </el-button>
                        <el-button link type="primary" size="small" @click="saveRow(scope.row)" v-if="scope.row.isEditing">
                        <el-icon class="me-1">
                            <View/>
                        </el-icon>
                        保存
                        </el-button>
                        <el-button link type="danger" size="small" @click="removeRow(scope.$index)">
                        <el-icon class="me-1">
                            <Delete/>
                        </el-icon>
                        移除
                        </el-button>
                    </template>
                    </el-table-column>
                    
                </el-table>
            </el-col>
            <el-col :span="24" style="text-align: right">
                <pagination
                    v-if="total > 10"
                    :page="paging.pageNum"
                    :limit="paging.pageSize"
                    :total="total"
                    @pagination="getLists"
                />
            </el-col>
        </el-row> -->
        <el-row class='mb-3 mt-4'>
            <el-col :span="24" class="tittle">
                <div class="tittle_dian"></div><span >处理信息</span> 
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12" class="" v-if="form.handleUserName">
                <el-form-item label="处理人" label-width="100px">
                  <el-input v-model="form.handleUserName" :readonly="isreadonly" />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="处理时间" label-width="100px" required prop="handledate">
                    <el-date-picker
                        value-format="YYYY-MM-DD HH:mm:ss"
                        v-model="form.handledate"
                        type="datetime"
                        :readonly="handledetailisreadonly"
                    />
                </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
                <el-form-item label="状态" label-width="100px">
                  <el-input v-model="form.name" :readonly="isreadonly" />
                </el-form-item>
            </el-col> -->
            <el-col :span="24">
                <el-form-item label="处理描述" label-width="100px" required prop="handledetail">
                    <el-input v-model="form.handledetail" type="textarea" resize="none" :rows="3" :readonly="handledetailisreadonly" />
                </el-form-item>
            </el-col>
        </el-row>            
    </el-form>
    <template #footer>
        <el-button type="primary" @click="submitHandle()" v-show="isShowTijiaoBtn">提交</el-button>
        <!-- 取消 -->
        <el-button @click="changeShowStatus">关闭</el-button>
    </template>
    </el-drawer>
  </template>
  <script setup>
  import {getCurrentInstance, onMounted} from "vue";
  import {ElMessageBox} from 'element-plus'
  const {proxy} = getCurrentInstance()
  import {GoodsMainList,GoodsMainEdit} from "@/api/ApplyDetail/ApplyDetail";
  import {recordListInfo,MAINreturnHandle} from "@/api/monitors/monitors.js";
  import GoodsMainAdd from "@/views/OnlineCheck/CheckFeedbackManage/components/GoodsMainAdd.vue";
  
  const isShow = ref(false)
  const tittle = ref('巡查反馈')
  const total = ref(0)
  const loading = ref(false)
  const info = ref('')
  const other = ref('')
  const imgurl = ref('')
  const srcList = ref([])
  const Options = ref([])
  
  const isShowAuto = ref(true)
  const isreadonly = ref(true)
  const isreadonlyhandledate = ref(false)
  
  const handledetailisreadonly = ref(false)

  const checkboxOptions = ref()
  
  const isShowTijiaoBtn = ref(true)
  const isEditing = ref(true)
  
  const TableData =ref([{},{}])
  const GoodsMainRef =ref({})
  const form =ref({})
  const queryParams = ref({
  jwApplydetailId:''
  })
  const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: 10
  })
  const rules = {
    handledate: [{ required: true, message: "处理时间不能为空", trigger: " " }],
    handledetail: [{ required: true, message: "处理描述不能为空", trigger: " " }],
   
  }
  // 通知事件
const emit = defineEmits(['getList'])
  // 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
}

  onMounted(() => {

  })
// 新增
const showAdd = async (tittleV) => {
    tittle.value = tittleV
    
    isShowAuto.value = true
    isShowTijiaoBtn.value = true
    isreadonly.value = false
    changeShowStatus()
    // await getDetail(data.planId)
}

// 展示抽屉详情
const showDetail = async (data,tittleV,typeV) => {
  // 获取当前登录者
    tittle.value = tittleV
    changeShowStatus()
    if(typeV == 'Edit'){
        isShowAuto.value = true
        isShowTijiaoBtn.value = true
        isreadonly.value = true
        handledetailisreadonly.value = false
    }
    if(typeV == 'See'){
        isShowAuto.value = false
        isShowTijiaoBtn.value = false 
        isreadonly.value = true
        handledetailisreadonly.value = true
    }
    await recordListInfo(data.xcId).then(res => {
        res.data.xcDetailList.forEach(item => {
        if (item.other) {
            other.value = item.other
        }
        });
      form.value = res.data
      info.value = form.value.xcDetailList[0].info
      imgurl.value = res.data.xcpic
      srcList.value[0] = res.data.xcpic
      checkboxOptions.value = form.value.xcDetailList
      form.value.xcDetailList = form.value.xcDetailList.map(item => item.xcContentId);
    })
}

  const submitHandle = () => {
    proxy.$refs["formRef"].validate(valid => {
        if (valid) {
            const subdata = {
                xcId:form.value.xcId,
                handledate:form.value.handledate,
                handledetail:form.value.handledetail,
            }
            MAINreturnHandle(subdata).then(res => {
                changeShowStatus()
            })
        }

    });
}
const addRow = async () => {
    TableData.value.push({
        areaname: '',
        getuserId: '',
        getdate: '',
        isEditing: true, // 新增时默认为可编辑状态
      });
  }
  const editRow = async (row) => {
    row.isEditing = true; // 将该行切换为可编辑状态
  }
  const saveRow = async (row) => {
    row.isEditing = false; // 将该行切换为可编辑状态
  }
  const removeRow = async (index) => {
    TableData.value.splice(index, 1); // 删除该行
  }


  defineExpose({showAdd,showDetail})
   // 关闭后的回调事件
   const closeHandle = () => {
    other.value = ""
    emit('getList', "来了老弟")
    console.log(123123)
}
  
  </script>
  <style scoped>
.pagination-container{padding: 0 16px !important;}


.tittle {display: flex;display: inline-flex;align-items: center;color: #0077B9;}
.tittle_dian{width: 5px;height: 16px;margin-right: 10px;background: #0077B9;}
</style>